<template>
  <Modal
    width="800"
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    footer-hide
    title="我的银行卡"
  >
    <div class="modal-main" style="position: relative">
      <Spin :withIcon="true" v-if="loading"></Spin>
      <div
        class="big-button-size-40 user-strong-button"
        style="margin-bottom: 20px; width: 160px"
        @click="addCard"
      >
        添加银行卡
      </div>
      <table class="table-area">
        <thead>
          <tr>
            <th>
              <div class="line-style" style="justify-content: center;min-width: 48px">序号</div>
            </th>
            <th><div class="line-style">开户人</div></th>
            <th><div class="line-style">银行名称</div></th>
            <th><div class="line-style">账号尾数（后4位）</div></th>
            <th><div class="line-style">添加日期</div></th>
            <th><div class="line-style">操作</div></th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(item, index) in list"
            :key="index"
            :class="[(index + 1) % 2 != 0 ? 'lc-f' : 'lc-F9FAFB']"
          >
            <td>
              <div class="line-style" style="justify-content: center;">
                <span class="normal-f f-ell-sin" title="">{{ index + 1 + (page - 1) * pageSize }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f">{{ item.username }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f f-ell-sin">{{ item.bankName }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f">{{ item.cardNumber }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f">{{ item.createdTime }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span
                  class="o-form-font-button f-ell-sin"
                  @click="deleteBankCard(item.id)"
                  >删除</span
                >
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <Empty-State
        v-if="total != null && total == 0"
        :noPadding="true"
        style="padding: 20px 0"
        content="未搜索到任何内容！"
      ></Empty-State>
      <div class="form-page-bottom-area flx-row-e-c">
        <Page
          :total="total"
          :current="page"
          :page-size="pageSize"
          @on-change="pageChange"
          show-elevator
          show-total
        />
      </div>
    </div>
  </Modal>
</template>

<script>
import { getBankCardList, deleteBankCard } from "@/api/user";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    show: {
      handler(newValue) {
        if (newValue) {
          this.page = 1;
          this.getBankCardList();
        }
      },
    },
  },
  data() {
    return {
      loading: "",

      // 分页设置
      total: null,
      pageSize: 10,
      page: 1,
      list: [],
    };
  },
  methods: {
    cancel() {
      this.config = false;
    },
    // 点击添加银行卡按钮
    addCard() {
      this.$emit("add-card");
      this.config = false;
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getCashOutRecord();
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
    // 获取银行卡列表
    async getBankCardList() {
      this.loading = true;
      let params = {
        limit: this.pageSize,
        page: this.page,
      };
      let res = await getBankCardList(params);
      if (res.code == 200) {
        if (
          this.page > 1 &&
          res.data.total <= (this.page - 1) * this.pageSize
        ) {
          this.page =
            res.data.total == 0 ? 1 : Math.ceil(res.data.total / this.pageSize);
          this.getBankCardList();
          return;
        }
        this.list = res.data.list;
        this.total = res.data.total;
      }
      this.loading = false;
    },
    // 删除
    deleteBankCard(id) {
      this.$Modal.confirm({
        title: "删除确认",
        content: "<p>确定要删除此银行卡吗？</p>",
        onOk: async () => {
          let res = await deleteBankCard(id);
          if (res.code == 200) {
            this.$Message.success("删除成功！");
            this.getBankCardList();
            this.$emit("delete-success", id);
          }
        },
      });
    },
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.modal-main {
  padding: 20px;
  max-height: 500px;
  overflow-y: auto;
}
</style>
